<template>
  <view 
    class="skyline-modal" 
    :class="{ 'modal-visible': show }"
    :style="{ zIndex: zIndex }"
  >
    <!-- 遮罩层 -->
    <view 
      class="modal-mask" 
      @tap="handleMaskClick"
      :class="{ 'mask-visible': show }"
    ></view>
    
    <!-- 弹窗内容 -->
    <view 
      class="modal-content"
      :class="{ 'content-visible': show }"
      :style="contentStyle"
    >
      <!-- 标题区域 -->
      <view v-if="title" class="modal-title">{{ title }}</view>
      
      <!-- 内容区域（插槽） -->
      <view class="modal-body">
        <slot></slot>
      </view>
      
      <!-- 按钮区域 -->
      <view class="modal-footer">
        <button 
          v-if="showCancel" 
          class="modal-btn cancel-btn"
          @tap="handleCancel"
        >
          {{ cancelText }}
        </button>
        <button 
          class="modal-btn confirm-btn"
          @tap="handleConfirm"
        >
          {{ confirmText }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SkylineModal',
  props: {
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: ''
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确认'
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: true
    },
    // 点击遮罩是否关闭弹窗
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 弹窗z-index
    zIndex: {
      type: Number,
      default: 1000
    },
    // 弹窗内容样式
    contentStyle: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    // 监听显示状态变化，控制页面滚动
    show(newVal) {
      if (typeof wx !== 'undefined') {
        // Skyline模式下控制页面滚动
        wx.setPageStyle({
          style: {
            overflow: newVal ? 'hidden' : 'auto'
          }
        })
      }
    }
  },
  methods: {
    // 点击确认
    handleConfirm() {
      this.$emit('confirm')
    },
    // 点击取消
    handleCancel() {
      this.$emit('cancel')
    },
    // 点击遮罩
    handleMaskClick() {
      if (this.maskClosable) {
        this.$emit('maskClick')
        this.$emit('cancel')
      }
    }
  }
}
</script>

<style scoped>
.skyline-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* 遮罩层样式 */
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 遮罩显示状态 */
.mask-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 弹窗内容样式 */
.modal-content {
  width: 600rpx;
  max-width: 90%;
  background-color: #fff;
  border-radius: 24rpx;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  overflow: hidden;
}

/* 弹窗内容显示状态 */
.content-visible {
  transform: scale(1);
  opacity: 1;
}

/* 标题样式 */
.modal-title {
  padding: 30rpx 30rpx 15rpx;
  font-size: 34rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
}

/* 内容区域样式 */
.modal-body {
  padding: 30rpx;
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
}

/* 底部按钮区域 */
.modal-footer {
  display: flex;
  border-top: 1px solid #eee;
}

/* 按钮样式 */
.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0;
  margin: 0;
  border: none;
  font-size: 32rpx;
  background-color: transparent;
}

/* 取消按钮 */
.cancel-btn {
  color: #666;
  border-right: 1px solid #eee;
}

/* 确认按钮 */
.confirm-btn {
  color: #007aff;
}

/* 去除按钮默认样式 */
::v-deep .modal-btn::after {
  border: none;
}
</style>
